const path = require('path') // 引入path模块
const UglifyJs = require('uglifyjs-webpack-plugin') // JS压缩插件，不需要安装就可以使用
const HtmlPlugin = require('html-webpack-plugin') // 入口html打包到dist。需要安装（npm install --save-dev html-webpack-plugin）才可以使用
const ExtractTextPlugin = require('extract-text-webpack-plugin') // css分离

module.exports = {
    entry: {
        entry: './src/entry.js' // entry可以随意命名
    }, // 打包入口
    output: {
        path: path.resolve(__dirname, 'dist'), // 工程的绝度路径node的语法
        //filename: 'bundle.js' // 对应<script src="./bundle.js"></script>
        filename: '[name].js', // [name]对应 entry选项中的entry和entry2
        publicPath: 'http://192.168.220.1:1717/' // index.html变为绝对路径http://...
    }, // 打包输出
    module: {
        rules: [ // 规则，有打包css的、转换js语法的、sass转换的
            {
                test: /\.css$/, // test用于通过正则表达式找到我们要处理的文件扩展名
                //use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] // loader不需要require，插件需要
                // style-loader它是用来处理css文件中的url()等
                // css-loader它是用来将css插入到页面的style标签。
                // 或者 use: ['style-loader', 'css-loader']
                // 或者 loader: ['style-loader', 'css-loader']
                // 还可以配置include（包含）和exclude（不包含）、query（额外配置项）
                // 如此配置css将打包到entry.js中

                use: ExtractTextPlugin.extract({ // css分离
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.(jpg|gif|png)/, // jpg gif png顺序改变，不然报错
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 5000, // limit的单位是B（byte，字节），大于5000生成url，否则在entry.js中生成base64
                            outputPath: 'images/' // url生成默认生成到dist下，如果想选择路径就要配置outputPath
                        }
                    }
                ]
            }
        ]
    }, // 转换sass、把es6转换为es5、打包css、图片转换、图片压缩
    plugins: [
        //new UglifyJs() // JS代码压缩
        new HtmlPlugin({
            minify: { // 压缩
                removeAttributeQuotes: true // 把<div id='app'>的单（双）引号去掉，能省一点空间则省
            },
            hash: true, // 以往修改JS代码运行后没有发生改变，这是JS缓存。hash每次配置一个hash值，确保不被缓存
            template: './src/index.html' // 指定入口模版路径
        }),
        new ExtractTextPlugin('css/index.css') // 使用css分离，不分离css，css将生成在entry.js中，分离后index.html出现<link href=/src/css/index.css?d9e1416c95aef4b07511 rel=stylesheet>引用
    ], // 插件(可以有多个，所以是数组)
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: '192.168.220.1', // 服务器地址，localhost有时候解析不到
        compress: true, // 服务器压缩
        port: 1717 // 端口
    } // Webpack开发服务
}

// 终端使用webpack命令打包（不用当前配置文件的话，那么使用webpack src/entry.js src/dist/bundle.js打包命令）